<template>
  <div>
    <div  style="padding-top:20px">
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">法人姓名</span>
          <span class="shop_img_notitle">{{shopgetinfo.attach.principalPerson}}</span>
        </div>
      </div>
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">企业法人证件号</span>
          <span class="shop_img_notitle">{{shopgetinfo.attach.principalCertNo}}</span>
        </div>
      </div>
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">统一社会信用代码</span>
          <span class="shop_img_notitle">{{shopgetinfo.attach.principalPerson}}</span>
        </div>
      </div>
        <div class="account_conter_item">
          <div class="account_item">
            <span class="account_item_title">账号</span>
            <span class="shop_img_notitle">{{shopgetinfo.bankNum==null||shopgetinfo.bankNum==""?'无':shopgetinfo.bankNum}}</span>
          </div>
        </div>
        <div class="account_conter_item">
          <div class="account_item">
            <span class="account_item_title">开户行</span>
            <span class="shop_img_notitle">{{shopgetinfo.bankName==null||shopgetinfo.bankName==""?'无':shopgetinfo.bankName}}</span>
          </div>
        </div>
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">经营类目</span>
            <span class="shop_img_notitle">{{shopgetinfo.shopCategoryName ? shopgetinfo.shopCategoryName : "无" }}</span>
        </div>
      </div>
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">营业执照</span>
          <div class="shop_img">
            <el-image ref="preview" :preview-src-list="srcList" :src="shopgetinfo.attach.license" style="width:140px;height:140px" v-if="shopgetinfo.attach.license"></el-image>
            <span class="shop_img_notitle" v-if="!shopgetinfo.attach.license">暂无执照</span>
          </div>
        </div>
        <div class="account_item">
          <span class="account_item_title">身份证正面(国徽)</span>
          <div class="shop_img">
            <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.idCardFront" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.idCardFront"></el-image>
            <span class="shop_img_notitle" v-if="!shopgetinfo.attach.idCardFront">暂无证件照</span>
          </div>
        </div>
      </div>
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">身份证反面</span>
          <div class="shop_img">
            <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.idCardBack" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.idCardBack"></el-image>
            <span class="shop_img_notitle" v-if="!shopgetinfo.attach.idCardBack">暂无证件照</span>
          </div>
        </div>
        <div class="account_item">
          <span class="account_item_title">店面门头照</span>
          <div class="shop_img">
            <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.thedoor" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.thedoor"></el-image>
            <span class="shop_img_notitle" v-if="!shopgetinfo.attach.thedoor">暂无门头照</span>
          </div>
        </div>
      </div>
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">银行卡/开户证明</span>
          <div class="shop_img">
            <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.bankinfoPhoto" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.bankinfoPhoto"></el-image>
            <span class="shop_img_notitle" v-if="!shopgetinfo.attach.bankinfoPhoto">暂无许可证</span>
          </div>
        </div>
        <div class="account_item">
          <span class="account_item_title">收银台照</span>
          <div class="shop_img">
            <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.companyInward" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.companyInward"></el-image>
            <span class="shop_img_notitle" v-if="!shopgetinfo.attach.companyInward">暂无场景照</span>
          </div>
        </div>
      </div>
      <div class="account_conter_item">
        <div class="account_item">
          <span class="account_item_title">食品经营许可证</span>
          <div class="shop_img">
            <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.food" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.food"></el-image>
            <span class="shop_img_notitle" v-if="!shopgetinfo.attach.food">暂无许可证</span>
          </div>
        </div>
        <div class="account_item">
          <span class="account_item_title">店内场景照</span>
          <div class="shop_img">
            <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.scene" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.scene"></el-image>
            <span class="shop_img_notitle" v-if="!shopgetinfo.attach.scene">暂无场景照</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { find } from "@/api/sysMch";
import { updateMchShop } from "@/api/sysSetUp";
import singleUpload from "@/components/Upload/singleUpload";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import utils from "@/utils/utils";
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'mchId'
    ])
  },
  components: { singleUpload },
  directives: { permission },
  props: {
    bankInformation: {
      type: Object,
    },
  },
  data() {
    return {
      loading: false, // 按钮防双击
      srcList: [],
      shopgetinfo:{},
    };
  },
  created() {
    this.getData()
    if (utils.isNull(this.shopgetinfo.attach.mcc)) {
      this.shopgetinfo.attach.mcc = "0";
    }
  },
  watch: {
    shopgetinfo: {
      handler(val, old) {
        if(val == null){
          val.attach == ""
        }
        if (val.attach) {
          if (typeof val.attach == "string") {
            val.attach = JSON.parse(val.attach);
            if (utils.isNull(val.attach.mcc)) {
              val.attach.mcc = "0";
            }
          }
        } else {
          val.attach = {
            license: "",
            idCardFront: "",
            idCardBack: "",
            thedoor: "",
            food: "",
            scene: "",
            mcc:"0"
          };
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    getData() {
      this.id = this.mchId;
      const _this = this;
      find(this.id)
        .then((response) => {
          console.log(
            utils.dateFormatter(response.data.sysMch.expiredDate)
          );
          if (response.data.sysMch.expiredDate) {
            response.data.sysMch.expiredDate = utils.dateFormatter(
              response.data.sysMch.expiredDate
            );
          }
          _this.shopgetinfo = response.data.sysMch;
        })
        .catch((error) => {});
    },
    forceRefresh(){
      this.$forceUpdate()
    },
    submit() {
      var _this = this;
      this.loading = true;
      updateMchShop(this.shopgetinfo)
        .then((res) => {
          console.log(res);
          this.loading = false;
          this.$message.success("修改成功");
          _this.$store
            .dispatch("tagsView/delView", _this.$route)
            .then(({ visitedViews }) => {
              _this.$router.push({
                path: "/sysMch/list",
              });
            });
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    inputClick(){
      this.$forceUpdate()
    }
  },
};
</script>

<style scoped>
.account_item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 30px;
  margin-left: 50px;
}

.account_item_title {
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  width: 160px;
  display: block;
}

.shop_img {
  width: 140px;
  height: 140px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin-left: 5px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop_img_notitle {
  font-size: 14px;
  color: #c0c4cc;
}
.account_conter_item{
  display: flex;
}
</style>


